<!--工单列表item组件-->
<script setup>
import dayjs from 'dayjs'
import { useRouter } from 'vue-router/composables'
import LevelTag from '@/views/workOrder/components/LevelTag.vue'
import LimitTag from '@/views/workOrder/components/LimitTag.vue'
import { useCommonTypesStore } from '@/stores/commonTypes.js'
import ClickBox from '@/components/ClickBox.vue'
const router = useRouter()
const { state } = useCommonTypesStore()
const props = defineProps({
  item: {
    type: Object,
    default: null
  }
})
// 跳转到工单详情
const goDetail = (id) => {
  router.push('/workOrder/detail?orderNo=' + id)
}

const statusName = computed(() => state.workerOrderStatusMap[props.item.status])
const infoTypeName = computed(() => state.infoTypeMap[props.item.infoType])
</script>

<template>
  <div class="m-t-12px rounded-[4px] overflow-hidden">
    <ClickBox>
      <div
        @click="goDetail(item.orderNo)"
        class="text-#54565C text-14px font-400 leading-20px box-border px-12px py-16px h-184px bg-white border border-solid border-white rounded-[4px]"
      >
        <div class="flex justify-between pt-2px mb-10px">
          <h3
            class="text-#1E2226 text-16px font-600 leading-16px m-0 flex-1 overflow-hidden whitespace-nowrap text-ellipsis"
          >
            {{ item.title }}
          </h3>
          <span class="leading-16px">
            {{ statusName }}
          </span>
        </div>
        <div class="mb-6px">舆情类别：{{ infoTypeName }}</div>
        <div class="mb-6px">舆情级别：<LevelTag :level="item.infoLevel" /></div>
        <div class="mb-6px">
          发布时间：{{
            item.publishTime
              ? dayjs(item.publishTime).format('YYYY-MM-DD HH:mm')
              : ''
          }}
        </div>
        <div class="mb-6px">
          工单来源：{{ item?.self === 0 ? '本单位' : '分发' }}
        </div>
        <div class="mb-6px">
          <LimitTag label="办理时限" :level="item.timeoutStatus" />
        </div>
      </div>
    </ClickBox>
  </div>
</template>

<style scoped lang="less"></style>
